<template>
  <div class="onDuty">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector" />
        </span>
        <div class="d-flex">
          <span class="fs-xxl text mx-2 mt-1">值班信息</span>
          <dv-decoration-6 style="width:100px;height:25px;" :color="datavColors"/>
        </div>
      </div>
      <div>
        <dv-scroll-board class="news pointer" :config="config" @click="skipto" />
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="值班详情" width="600px"></el-dialog>
</template>

<script lang="ts">
import { defineComponent,reactive,ref,computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
  },
  setup() {
    const datavColors = computed(() => useStore().state.datavColors)
    const dialogVisible = ref(false)

    const config = reactive({
      header:['名称','时间','值班内容','联系电话'],
      data: [
        ["夏凡", "2022-07-16",'一号门','15927100621'],
        ["解澳", "2022-07-16",'二号门','15927100622'],
        ["唐长松", "2022-07-16",'三号门','15927100623'],
        ["李佳玉", "2022-07-16",'四号门','15927100624'],
        ["段志豪", "2022-07-16",'五号门','15927100625'],
        ["黄韵寒", "2022-07-16",'六号门','15927100626'],
        ["沈仁伦", "2022-07-16",'七号门','15927100627'],
        ["吕雅婷", "2022-07-16",'八号门','15927100628'],
        ["陈海莲", "2022-07-16",'九号门','15927100628'],
        ["蔡雷", "2022-07-16",'十号门','15927100620'],
      ],
      align:['left','left','center','left'],
      columnWidth: [100,100,300, 120],
      headerBGC:'rgb(24 85 94 / 32%)',
      oddRowBGC: "rgb(2 22 30 / 46%)",
      evenRowBGC: "rgb(0 59 81 / 28%)",
    });

    const skipto = (val) => {
      console.log(val.rowIndex)
      dialogVisible.value=true
      event.stopPropagation();
    }

    return{
      config,
      skipto,
      dialogVisible,
      datavColors
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
$box-height: 320px;
$box-width: 100%;
.onDuty {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 32px;
    border-radius: 10px;
  }
}
.news {
  width: 100%;
  height: 240px;
  margin-top: 10px;
}
</style>
